<template>
  <h1>(watchEffect)</h1>
  <h2>num:{{num}}</h2>
  <h2>爱好:{{aihao}}</h2>
  <button @click="num++">修改num</button>
  <button @click="updateAihao">修改爱好</button>
</template>

<script>
import { ref, watchEffect, reactive } from 'vue'
export default {
  setup () {
    let num = ref(100)
    const aihao = reactive(['抽烟', '喝酒', '烫头'])
    // 类似于computed
    // 用了哪些数据,当这些数据发送变化时,会再次执行(浅度监听)
    // watchEffect注重的是函数体,computed注重的是返回结果
    watchEffect(() => {
      console.log('watchEffect回调函数执行了!!');
      console.log(num.value);
      console.log(aihao[0]);
      // console.log(aihao)
    })
    function updateAihao () {
      aihao[0] = '学习'
    }
    return {
      num,
      aihao,
      updateAihao
    }
  }
}
</script>